<template>
  <view>
    <scroll-view class="uni-swiper-tab" scroll-x>
      <view class="scrollx_items" v-for="(item,index) in FenLeiList" :key="index" @click="ClickGDMenus(item,index)">
        <view style="display: flex;flex-direction: column;align-items: center;text-align: center;" >
          <view class="menu_item"  style="position: relative">
<!--            <image v-if="index===current" class="nav-bg" src="/static/images/nav-bg.png"></image>
            <image v-if="index===0" class="nav-text-bg" src="/static/images/nav-text.png"></image>-->
            <!--<view v-if="index===0" class="nav-name">{{ item.name }}</view>-->
            <view v-if="index === current" class="menu_item_i"></view>
            <image class="nav-icon" :src="item.image"></image>
          </view>
          <view class="menu_text" :class="[index===current?'menu_text_click':'menu_text_no_click']">{{ item.name }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "home-new-scroll-menus",
  props: {
    FenLeiList: {
      type: Array,
      default: []
    },
    current:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      menuIndex: 0,
    };
  },
  methods:{
    ClickGDMenus(item, index) {
      // this.current = index
      this.$emit("ClickScrMenu", {item,index})
    }
  }
}
</script>


<style scoped lang="scss">
/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.uni-swiper-tab {
  white-space: nowrap;
  //padding-left: 30rpx;
}


.menu_text {
  font-size: 26rpx;
}

.menu_item {
  position: relative;
  width: 88rpx;
  height: 88rpx;
  //background: #FEEBD3;
  .menu_item_i{
    position: absolute;
    top: 0;
    z-index: 10;
    height: 88rpx;
    width: 88rpx;
    border: 2rpx solid #FEA959;
    border-radius: 50%;
  }
  .nav-bg {
    height: 88rpx;
    width: 88rpx;

  }

  .nav-text-bg {
    height: 88rpx;
    width: 88rpx;
    position: absolute;
    left: 0;
    z-index: 2;
  }

  .nav-name {
    position: absolute;
    bottom: 6rpx;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 22rpx;
    z-index: 10;
  }
}

.scrollx_items {
  margin: 34rpx 44rpx 0rpx 0rpx;
  display: inline-block;
}
.scrollx_items:first-child {
  padding-left: 30rpx;
}
.scrollx_items:last-child {
  margin-right: 0;
  padding-right: 30rpx;
  display: inline-block;
}

.menu_text {
  width: 100%;
  margin-top: 20rpx;
  font-size: 24rpx;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu_text_click {
  color: #F77A26;
  font-weight: bold;
}
.menu_text_no_click{
  color: #666666;
}
.nav-icon {
  height: 88rpx;
  width: 88rpx;
  /*margin-left: 10rpx;
  margin-top: 10rpx;*/
  position: absolute;
  left: 0;
  z-index: 1;
}
</style>